<template>
     <div class="cityList">
       <div class="city_tit">
        <NavBar :tit="'城市列表'"></NavBar>
       </div>
        <div class="city_List">
            <van-index-bar class="city_lis"
            :sticky='false'
            @select="select"
            :index-list="getDatum.letters">
              <van-index-anchor
              index="当前定位"
              />
                <van-cell :title="getDatum.location" />


                <div class="letterLis"  v-for="(l,ind) in getDatum.cityLis" :key="ind">
                  <van-index-anchor :index="getDatum.letters[ind]" />
                        <div v-for="(d,k) in l" :key="k" @click="locationCity(d)">
                          <van-cell :title="d.label"></van-cell>
                        </div>
                </div>
            </van-index-bar>
        </div>
    </div>
</template>

<script>
    import {getCity} from '../../api/getDatum'
import { defineComponent, reactive ,onMounted} from 'vue'
import {Toast} from 'vant'
import {useRouter} from 'vue-router'
export default defineComponent({
  setup(props,context) {
      const getDatum = reactive({
          citys:[],
          letters:[],
          lettes:[],
          location:'上海',
      });

    //   跳转
    let router = useRouter();

    //   获取城市数据
    const getCitys = async () => {
        // 获取数据
        const cityLis = await getCity();
        console.log(cityLis,'lios');
        // 把获取的数据 以字母顺序排序
        getDatum.cityLis = cityLis.body.sort((a, b) => a.pinyin.localeCompare(b.pinyin))
        // 用于筛选
        let letterLis = new Set();
        // 动态过滤拿到标题数据
       getDatum.cityLis.forEach(item => {
        //    动态添加数据到过滤数据数组
            letterLis.add(item.short[0].toUpperCase());
        })
        // 右侧楼层点击数据
        getDatum.letters = [...letterLis]

        
        // 拿到相对应的城市
        getDatum.cityLis = getDatum.letters.map(item => {
            return getDatum.cityLis.filter(city => {
                return item.indexOf(city.short[0].toUpperCase()) !== -1
            })
        })
    }

    // 当前城市
    const select = () => {
      router.go(-1);
    }

    // 选择城市
    const locationCity = (cit) => {
        if(cit.label !== getDatum.location){
            Toast.fail('该城市暂无房源');
        }else{
            Toast.success('Welcome to ShangHai');
            localStorage.setItem('locaCity',getDatum.location);
            router.go(-1);
        }
    }
    // 挂载后获取
    onMounted(() => {
        getCitys();
    })
      return {  
        getDatum,
        select,    
        locationCity,    
      }
  },
})
</script>

<style lang='less' scoped>
.cityList{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .city_tit{
        width: 100%;
        height: 60px;
    }
    .city_List{
        flex: 1;
        overflow-y: auto;
      .city_lis{
        width: 100%;
        height: 100%;
        .van-index-anchor{
          color: #999;
          font-size: .3rem;
        }
        .van-cell{
          font-size: .3rem;
          color: #333;
          border-bottom: .04rem solid #f5f5f5;
        }
      }
    }
}
</style>
